<template>
  <div class="customMap">
    <div class="legend">
      <div class="legend_item">
        <img
          src="/static/devices/measure-point.png"
          class="h-6 w-6 select-none"
        />
        <span>测点</span>
      </div>
      <div class="legend_item">
        <img
          src="/static/screen/icon-station.png"
          class="h-6 w-6 select-none"
        />
        <span>台站</span>
      </div>
    </div>
  </div>
  <!-- 台站波形数据弹窗 -->
  <WaveChart
    class="wave-box h-full w-full"
    v-if="showWave"
    :stationId="stationId"
    :structureName="structureName"
    :style="waveStyle"
  ></WaveChart>
</template>

<script setup lang="ts">
import { CSSProperties, computed, onMounted, ref, watch } from 'vue';
import { bindList } from '@/pages/monitor/preview-3d/api';
import { fetchStationNetwork, fetchStructureTree } from '@/pages/screen/api';
import WaveChart from '@/pages/screen/components/ScreenWrap/components/wave-chart/index.vue';
import { getMap, useOl } from '@/pages/screen/components/olMap/index.vue';
import { boundingExtent } from 'ol/extent';
import { fromLonLat } from 'ol/proj';
import { eventBus } from '@/utils/eventMitt';

const showWave = ref(false);
const stationId = ref<string>('');
const waveStyle = computed<CSSProperties>(() => {
  return {
    position: 'absolute',
    width: '50%',
    height: '50%',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };
});

const data: any = ref(history.state);
eventBus.on('changeStructure', (state: any) => {
  data.value = state;
});

const currentStationId = ref(0);
const currentStructureId = ref(0);

const { removeFeature, renderFeature } = useOl({
  onClick(res) {
    currentStructureId.value = res.data.structureId;
    currentStationId.value = res.data.id;
    structureName.value = '';
    if (res.data && res.data.hasOwnProperty('latitude')) {
      // 点击台站
      if (!res.data?.networkCode || !res.data?.stationCode) return;
      showWave.value = true;
      stationId.value = res.data?.networkCode + '.' + res.data?.stationCode;
    } else if (res.data && res.data.hasOwnProperty('lat')) {
      // 点击测点
      showWave.value = true;
      stationId.value = res.data.stationId;
      structureName.value = res.data.pointName;
    } else {
      showWave.value = false;
    }
    renderMarker();
  },
});

const stations = ref([]);
const structures = ref([]);
const structureName = ref('');

watch(
  () => data.value,
  async (val) => {
    const result = await fetchStationNetwork();
    stations.value = result.rows;
    const structureId = val.structureId;
    const res = await bindList({ structureId });
    structures.value = res.data;
    renderMarker();
  },
  { immediate: true, deep: true },
);

const renderMarker = () => {
  removeFeature();
  renderStationMarker(stations.value);
  renderStructureMarker(structures.value);
  setView(structures.value, stations.value);
};

const renderStationMarker = (list) => {
  list.forEach((item) => {
    renderFeature({
      lonLat: [+item.longitude, +item.latitude],
      data: item,
      style: {
        image: {
          src:
            item.id === currentStationId.value
              ? '/static/screen/icon-station-active.png'
              : '/static/screen/icon-station.png',
          scale: 0.8,
        },
      },
    });
  });
};
const renderStructureMarker = (structure) => {
  console.log(structure);

  structure.forEach((item) => {
    renderFeature({
      lonLat: [item.lon, item.lat],
      data: item,
      style: {
        image: {
          src:
            item.structureId === currentStructureId.value
              ? '/static/screen/icon-measure-1.png'
              : '/static/devices/measure-point.png',
          scale: 0.8,
        },
      },
    });
  });
};

const setView = (pointList, stationList) => {
  const list = stationList.map((i) => {
    return {
      lat: i.latitude,
      lon: i.longitude,
      ...i,
    };
  });
  const newList = list.concat(pointList);
  const transformedCoords = newList.map((item) => {
    return fromLonLat([item.lon, item.lat]);
  });
  const extent = boundingExtent(transformedCoords);
  getMap()
    .getView()
    .fit(extent, {
      padding: [200, 400, 200, 400],
      duration: 300,
    });
};
</script>

<style lang="scss" scoped>
.customMap {
  position: relative;
  // background-color: red;
  width: 100%;
  height: 100%;
  .legend {
    position: absolute;
    right: 4px;
    top: 40px;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5vh 1vw;
    border-radius: 6px 0 0 0;
    display: flex;
    &_item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
      img {
        margin-right: 1vw;
      }
    }
  }
}
</style>
